{include file="$header"}
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="login-wrapper">
            <div class="login-container">
                <div class="login-body">
                    <div class="login-side">
                        <div class="login-side-content">
                            <div class="login-side-logo">
                                <img alt="login" src="{$system.logo}">
                            </div>
                            <div class="login-side-title">{:lang('login side title')}</div>
                            <div class="login-side-comments">{:lang('login side comments')}</div>
                            <div class="login-side-footer">
                                <a href="javascript:;">{:lang('login side footer')}</a>
                            </div>
                        </div>
                    </div>
                    <div class="login-form-warp">
                        <div class='login-form-content'>
                            <div class="login-warp">
                                <div class="login-title">{:lang('change password')}</div>
                                <div class="login-ctitle">CHANGE PASSWORD</div>
                                <el-form class="login-form" :model="ruleForm" :rules="rules" ref="ruleForm" @submit.native.prevent>
                                    <template v-if="captchaShow">
                                        <div class="captcha-title">{:lang('machine verification')}</div>
                                        <el-form-item v-if=" captcha !== '' " prop="captcha">
                                            <img class="captcha-img" :src="captcha" @click="getCaptcha()" />
                                            <el-input class="captcha-code" v-model="ruleForm.captcha" placeholder="{:lang('please enter the graphic verification code above')}"></el-input>
                                        </el-form-item>
                                        <el-button :disabled="ruleForm.captcha.length === 4 ? false : true" class="login-btn" @click="getCode()" 
                                            :loading="loading" plain>
                                            {:lang('verification')}
                                        </el-button>
                                    </template>
                                    <template v-else>
                                        <el-form-item prop="account">
                                            <el-input v-model="ruleForm.account" prefix-icon="el-icon-user" placeholder="{:lang('please enter email/mobile')}" @input="showGetCode()"></el-input>
                                        </el-form-item>
                                        <el-form-item prop="code" v-if="regular">
                                            <el-input style="width: 200px" v-model="ruleForm.code" prefix-icon="el-icon-time" placeholder="{:lang('please enter the verification code')}"></el-input>
                                            <el-button @click="clickGetCode()":disabled="now_interval !== 0">
                                                {{now_interval == 0 ? lang('get verification code') : now_interval + lang('resend in seconds')}}
                                            </el-button>
                                        </el-form-item>
                                        <el-form-item prop="password">
                                            <el-input v-model="ruleForm.password" prefix-icon="el-icon-key" placeholder="{:lang('please enter the password to be modified')}" show-password @keyup.enter.native="passwordChange()"></el-input>
                                        </el-form-item>
                                        <el-button class="login-btn" @click="passwordChange()" :loading="loading" plain>
                                            {:lang('change password')}
                                        </el-button>
                                        <div class="regOrPwd">
                                            <a href="{:url('login/index')}">{:lang('user login')}</a>
                                            <a href="{:url('login/register')}" style="float: right;">{:lang('sign up now')}</a>
                                        </div>
                                    </template>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                captcha: "",
                captchaShow: false,
                regular: false,
                now_interval: 0,
                interval: 60,
                timer: '',
                ruleForm: {
                    account: "",
                    email: "",
                    mobile: "",
                    password: "",
                    code: "",
                    captcha: "",
                },
                rules: {
                    account: [
                        { required: true, message: lang('please enter'), trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: lang('cannot contain Chinese characters'), trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: lang('please enter'), trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: lang('please enter'), trigger: 'blur' },
                    ],
                    captcha: [
                        { required: true, message: lang('please enter'), trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            /**
             * 显示获取邮箱验证码
             */
            showGetCode() {
                let email  = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                let mobile = /^1[3456789]\d{9}$/;
                if (email.test(this.ruleForm.account)) {
                    this.ruleForm.email = this.ruleForm.account;
                    this.ruleForm.mobile = "";
                }
                if (mobile.test(this.ruleForm.account)) {
                    this.ruleForm.email = "";
                    this.ruleForm.mobile = this.ruleForm.account;
                }
                this.regular = email.test(this.ruleForm.account) || mobile.test(this.ruleForm.account);
            },
            /**
             * 点击获取邮箱验证码
             */
            clickGetCode() {
                this.getCaptcha();
                this.ruleForm.captcha = "";
                this.captchaShow  = true;
            },
            /**
             * 获取邮箱验证码
             */
            getCode() {
                let self = this;
                if (self.now_interval == 0) {
                    self.loading = true;
                    let url = 'login/sendPasswordEmailCode';
                    let obj = {captcha: self.ruleForm.captcha, email: self.ruleForm.email};
                    if (self.ruleForm.mobile !== '') {
                        url = 'login/sendPasswordMobileCode';
                        obj = {captcha: self.ruleForm.captcha, mobile: self.ruleForm.mobile};
                    }
                    request.post(url, obj, function(res){
                        if (res.status === 'success') {
                            self.captchaShow  = false;
                            self.now_interval = 60;
                            self.timer        = setInterval(() => {
                                if (self.now_interval > 0) {
                                    self.now_interval--;
                                }
                            }, 1000);
                        } else {
                            self.getCaptcha();
                            self.ruleForm.captcha = "";
                            self.$message({ showClose: true, message: res.message, type: res.status});
                        }
                        self.loading = false;
                    })
                }
            },
            /**
             * 获取验证码
             */
            getCaptcha() {
                this.captcha = url('login/verify', {rand: Math.random()});
            },
            /**
             * 修改密码
             */
            passwordChange() {
                let self = this;
                self.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        request.post('login/password', self.ruleForm, function(res){
                            self.loading = false;
                            if (res.status === "success") {
                                self.$message({ showClose: true, message: res.message, type: res.status, onClose:function(){location.href = url('login/index')}});
                            } else {
                                self.$message({ showClose: true, message: res.message, type: res.status});
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
    });
</script>
{include file="$footer"}